<template>
  <div class="echart-series-label">
    <FormItem
      :form="form"
      option="echart.series.barWidth"
      :label="$demoi18n('echart.label.barWidth')"
      type="number"
      :show-switch="true"
      serie-type="bar"
    />
    <FormItem
      :form="form"
      option="echart.series.barGap"
      :label="$demoi18n('echart.label.barDistance')"
      type="number"
      :show-switch="true"
      :show-unit="true"
      :units="[{ label: '%', value: '%' }]"
      serie-type="bar"
      :helptip="$demoi18n('echart.tip.barOverlap')"
    />
    <FormItem
      v-if="stackAvailable"
      :form="form"
      option="echart.series._stackName"
      :label="$demoi18n('label.barArrangement')"
      type="radio"
      :options="stackNames"
      serie-type="bar"
    />
    <FormItem
      :form="form"
      option="echart.series.itemStyle.borderColor"
      :label="$demoi18n('echart.label.barStrokeColor')"
      type="color"
      serie-type="bar"
    />
    <FormItem
      :form="form"
      option="echart.series.itemStyle.borderWidth"
      :label="$demoi18n('echart.label.barStrokeWidth')"
      type="number"
      serie-type="bar"
    />
    <FormItem
      :form="form"
      option="echart.series.itemStyle.borderType"
      :label="$demoi18n('echart.label.barStrokeType')"
      type="select"
      :options="lineTypes"
      serie-type="bar"
    />
    <FormItem
      :form="form"
      option="echart.series.showBackground"
      :label="$demoi18n('echart.label.showBackgroundColor')"
      type="switch"
      serie-type="bar"
      @change="showBackgroundChange"
    />
    <FormItem
      v-if="showBackground"
      :form="form"
      option="echart.series.backgroundStyle.color"
      :label="$demoi18n('echart.label.BarBackgroundColor')"
      type="color"
      serie-type="bar"
    />
  </div>
</template>
<script>
import FormItem from '@/components/common/echart/form-item.vue';
import { lineTypes, stackNames } from '@/components/common/echart/form-item-options.js';

export default {
  components: { FormItem },
  props: {
    form: Object,
  },
  data() {
    return {
      lineTypes,
      stackNames,
      showBackground: false,
    };
  },
  computed: {
    stackAvailable() {
      const excludes = ['ladder-waterfall'];
      if (excludes.includes(this.form.echart._componentName)) {
        return false;
      }
      return true;
    },
  },
  watch: {},
  created() {
    this.initWatch();
  },
  methods: {
    showBackgroundChange(val) {
      this.showBackground = val;
    },
    initWatch() {
      if (this.stackAvailable) {
        this.$watch(
          'form.echart.series._stackName',
          val => {
            this.form.echart.series.stack = val === 'stack' ? 'stack' : '';
          },
          { immediate: true },
        );
      }
    },
  },
};
</script>
<style lang="less" scoped></style>
